<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

const goBack = () => {
  router.back();
};

const confirmRead = () => {
  // 跳转到院区列表页面
  router.push('/hospital-list');
};
</script>

<template>
  <div class="self-order-page">
    <van-nav-bar
      title="自助开单"
      left-arrow
      @click-left="goBack"
    >
      <template #right>
        <div class="nav-icons">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="circle-btn"></span>
        </div>
      </template>
    </van-nav-bar>

    <div class="content">
      <h2 class="notice-title">自助开单须知</h2>
      
      <div class="notice-content">
        <p><span class="number">1、</span>便民门诊就诊须先挂号，再就诊，实名就诊，病员信息与就诊卡不符，不能开药开单。</p>
        <p><span class="number">2、</span>便民门诊可开具临床医疗常规用药，如常规中成药、常规西药。根据药品管理规定，<span class="highlight">便民门诊不得开具：(1)抗生素类药品，如青霉素、头孢菌素类、碳青霉烯类、氨基糖苷类、喹诺酮类抗菌药物；(2)麻醉药品、精神药品、毒性药品、抗肿瘤药物、高警示药品；(3)各类静脉输液用药。</span>如需开上述药品，请到相应专科就诊由专科医生评估后开具。</p>
        <p><span class="number">3、</span>根据《处方管理办法》，处方开具当日有效；处方量不得超过7日用量；对于某些慢性病、老年病或特殊情况，处方用量可适当延长，但医师应注明理由。</p>
        <p><span class="number">4、</span>便民门诊不做病情、检验、检查结果的解释，不开具诊断证明书。</p>
        <p><span class="number">5、</span>代开药需持开药患者本人和代开药人身份证件，并说明用途。</p>
        <p><span class="number">6、</span>便民门诊仅开具以体检为目的的常规临床医疗化验检查申请单，如血、尿、便常规、乙肝三系、血生化、心电图、B超、X片、CT等，其他特殊大型检查请到专科开具。</p>
        <p><span class="number">7、</span>工作时间：周一到周五：07:45-12:00，12:45-16:30，8点/6周日：08:00-12:00节假日以医院公告为准。</p>
      </div>
      
      <p class="warning-text">注意:孕妇请在执业中医师指导下使用；初诊患者和非慢性疾病的复诊患者都不建议在便民门诊就医开药，以免耽误病情。</p>
      
      <div class="button-container">
        <van-button 
          type="primary" 
          block 
          class="confirm-button" 
          @click="confirmRead"
        >
          我已阅读并同意须知
        </van-button>
        <div class="read-text">我已阅读</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.self-order-page {
  background: #f8f9fa;
  min-height: 100vh;
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 6px;
  height: 6px;
  background: #d8d8d8;
  border-radius: 50%;
  display: inline-block;
}

.circle-btn {
  width: 18px;
  height: 18px;
  border: 1.5px solid #d8d8d8;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
}

.content {
  padding: 16px;
}

.notice-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.notice-content {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.notice-content p {
  margin-bottom: 12px;
  line-height: 1.6;
  font-size: 14px;
  text-align: justify;
}

.number {
  font-weight: bold;
}

.highlight {
  color: #f56c6c;
}

.warning-text {
  color: #f56c6c;
  font-size: 14px;
  margin-bottom: 30px;
  line-height: 1.5;
}

.button-container {
  margin-top: 20px;
  position: relative;
}

.confirm-button {
  height: 44px;
  font-size: 16px;
  border-radius: 22px;
  background-color: #1989fa;
}

.read-text {
  margin-top: 12px;
  text-align: center;
  color: #333;
  font-size: 14px;
}
</style> 